<template>
    <div class="el-form-content">
        <el-form :model="form">
            <el-form-item>
                <el-input v-model="form.username" placeholder="请输入用户名" />
            </el-form-item>
            <el-form-item style="margin-bottom: 10px;">
                <el-input v-model="form.password" placeholder="请输入密码" />
            </el-form-item>
            <el-checkbox v-model="checked" style="margin:0 5px 10px 0;" />
            <p class="zhengce">
                <span>已阅读并同意小米账号 </span>
                <a href="">用户政策</a>
                <span>和</span>
                <a href="">隐私协议</a>
            </p>
            <el-form-item style="margin-bottom: 10px;">
                <el-button type="primary" @click="onSubmit">登录</el-button>
            </el-form-item>
            <p class="class_p">
                <a href="">忘记密码?</a>
                <a href="">手机号登录</a>
            </p>
        </el-form>
    </div>
</template>
<script setup>
import { useRouter } from 'vue-router';
import axios from 'axios'
import { onBeforeMount, onBeforeUnmount, reactive, ref } from 'vue'
const form = reactive({
    username: "",
    password: "",
})
const router = useRouter()
const checked = ref(false)
const onSubmit = async () => {
    if (checked.value === false) {
        alert("请勾选用户协议！")
        return
    } else {
        if (form.username === "") {
            alert("用户名不能为空")
            return
        } else if (form.password === "") {
            alert("密码不能为空")
            return
        } else if (form.username === "" && form.password === "") {
            alert("用户名和密码不能为空")
            return
        } else {
            await axios.get(`http://localhost:3030/Allin/login?username=${form.username}&password=${form.password}`).then(res => {
                if (res.data.ok === 1) {
                    alert("登录成功")
                    router.push(`/shop/list`)
                    form.username = ""
                    form.password = ""
                    checked.value = false
                } else {
                    alert("登录失败")
                    form.username = ""
                    form.password = ""
                    checked.value = false
                }
            })
        }

    }
}
</script>
<style lang="scss" scoped>
.el-form-content {
    margin-top: 40px;

    .el-form {

        .el-form-item {
            margin-bottom: 30px;

            .el-input {
                height: 50px;
            }

            .el-button {
                width: 356px;
                height: 60px;
                background: #ffbe99;
                border: none;
                font-size: 20px;
                font-weight: 500;
            }
            .el-button:hover{
                background: orangered;
            }
        }

        .zhengce {
            display: inline-block;

            span {
                margin: 0 5px;
                font-weight: 600;
                color: #ccc;
            }

            a {
                text-decoration: none;
                font-weight: 500;
                color: black;
            }
        }

        .class_p {
            width: 100%;
            height: 30px;
            display: flex;
            justify-content: space-between;

            a {
                text-decoration: none;
                color: orangered;
                font-weight: 500;
            }
        }
    }
}
</style>